<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.2</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row">
				<form action="" method="post" class="layui-form layui-form-pane" id="form1">
					<div class="layui-form-item">
						<label for="name" class="layui-form-label">
                        <span class="x-red">*</span>角色
                    </label>
						<div class="layui-input-inline">
							<input type="text" readonly="readonly" id="name1" name="roleName" required="" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-form-text" id="saveTr">
						<label class="layui-form-label">
                        拥有权限
                    </label>
						<table class="layui-table layui-input-block" >
							<tbody>
								<tr v-for="log in logs">
									<td>
										<input  type="checkbox" :id="log.functionId" :v-model="log.functionId" name="functionId" lay-skin="primary" lay-filter="father" :value="log.functionId" :title="log.functionName">
									</td>
									<td>
										<div class="layui-input-block" v-for="v in loga" v-if="v.parentId==log.functionId">
											<input name="functionId" ref="b" :id="v.functionId" :v-model="v.functionId" lay-skin="primary" type="checkbox" :value="v.functionId" :title="v.functionName">
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="layui-form-item">
						<button  class="layui-btn" lay-submit="" lay-filter="add" id="btn">赋权</button>
						<button class="layui-btn" lay-submit="" lay-filter="add" id="btn1">增加</button>
					</div>
				</form>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="./js/vue.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		
		<script src="js/jquery.cookie.js"></script>
		<script>
			var roleId = $.cookie("id");
			$(function() {
//				$.get("http://localhost:9095/permission/selectgetById",{"roleId": roleId},function(msg){
//						        if(msg.code==200){
//						        	console.log(msg.data)
//						        	//获取已有权限
//						        	alert(msg.data);
//						        	obj = document.getElementsByName("functionId");
//						        	//权限总和
////                    check_val = [];
////                   for(k in obj){
//////                   if(!obj[k].checked)
////                      check_val.push(obj[k].value);
////                   }
//                  alert(check_val);
//                  for(check_val)
//						        }else{
//						        	alert("无数据")
//						        }
//					});
				var name = $.cookie("name");
				$("#name1").val(name);
				$("#btn").click(function() {
					var fun = "";
					hobbies = document.getElementsByName("functionId");
					for(let index = 0; index < hobbies.length; index++) {
						if(hobbies[index].checked) {
							fun += hobbies[index].value + ',';
						}
					}
					$.post("http://localhost:9095/permission/insertRoleFunction", {"roleId": roleId,"functionId": fun}, function(msg) {
						if(msg.code == 201) {
							alert("新增权限失败");
						} else {
							alert("新增权限成功");
							location.href = "admin-role.html";
						}
					})
					
					

				});
			});

			const saveTr = new Vue({
				el: "#saveTr",
				data: {
					logs: [],
					loga: [],
					role:[],
					mol:[]
				},
				methods: {

				},
				created() {
					let _this = this;
					
					//  			父权限
					axios.get("http://localhost:9095/permission/sel1").then(function(response) {
						_this.logs = response.data.data;
						//    		console.log(response.data.data)
					});
					
					//      子权限
					axios.get("http://localhost:9095/permission/sel2").then(function(response) {
						_this.loga = response.data.data;
						console.log(response.data.data)
					});
					
//					已有的权限
					axios.get("http://localhost:9095/permission/selectgetById",{
						params:{
							"roleId": roleId
						}
						})
					.then(function(response) {
						_this.role = response.data.data;
						_this.role.forEach(function(obj){
							_this.logs.forEach(function(i){
								if(obj.functionId==i.functionId){
									document.getElementById(i.functionId).checked=true;
								}
							});
							_this.logs.forEach(function(x){
								if(obj.functionId==x.functionId){
									document.getElementById(x.functionId).checked=true;
							}
							});
							
						})
						

					});
				}
			})

			layui.use(['form', 'layer'], function() {
				$ = layui.jquery;
				var form = layui.form,
					layer = layui.layer;

				//自定义验证规则
				form.verify({
					nikename: function(value) {
						if(value.length < 5) {
							return '昵称至少得5个字符啊';
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					repass: function(value) {
						if($('#L_pass').val() != $('#L_repass').val()) {
							return '两次密码不一致';
						}
					}
				});

				//监听提交
				form.on('submit(add)', function(data) {
					console.log(data);
					//发异步，把数据提交给php
					layer.alert("增加成功", {
						icon: 6
					}, function() {
						// 获得frame索引
						var index = parent.layer.getFrameIndex(window.name);
						//关闭当前frame
						parent.layer.close(index);
					});
					return false;
				});

				form.on('checkbox(father)', function(data) {

					if(data.elem.checked) {
						$(data.elem).parent().siblings('td').find('input').prop("checked", true);
						form.render();
					} else {
						$(data.elem).parent().siblings('td').find('input').prop("checked", false);
						form.render();
					}
				});

			});
		</script>
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</body>

</html>